<template>
<div class="page-wrapper">
    <div class="page-wrapper__body">
        <div class="page-container is-form search-form-box"  v-loading="isLoading">
        <el-form ref="form" :model="form" label-position="left" :rules="rules" label-width="100px">
            <el-form-item label="合同编号" prop="contract">
                <el-input v-model="form.contract" placeholder="HPO内项目合同编号" style="width:25%; padding-right: 20px"></el-input>
                <span class="default_tips">格式CON+年月日+3位城市区号+3位数顺序编号（如：CON20190309XXX001）</span>
            </el-form-item>
            <el-form-item label="院校" prop="school">
                <el-input v-model="form.school" type="textarea" rows="3" placeholder="请填写院校名称,多个以英文逗号隔开" style="width:50%"></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-checkbox-group v-model="form.education">
                    <el-checkbox label="专科" name="type"></el-checkbox>
                    <el-checkbox label="本科" name="type"></el-checkbox>
                    <el-checkbox label="硕士" name="type"></el-checkbox>
                    <el-checkbox label="博士" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="专业">
                <el-input v-model="form.major" placeholder="请填写专业,多个以英文逗号隔开" style="width:25%; padding-right: 20px"></el-input>
            </el-form-item>
            <el-form-item label="所在城市">
                <el-input v-model="form.city" placeholder="请填写所在城市,多个以英文逗号隔开" style="width:25%; padding-right: 20px"></el-input>
            </el-form-item>
            <el-form-item label="毕业时间">
                <el-input v-model="form.graduate" placeholder="请填写毕业时间,多个以英文逗号隔开" style="width:25%; padding-right: 20px"></el-input>
            </el-form-item>
            <el-form-item label="研究方向">
                <el-input v-model="form.study" placeholder="请填写研究方向,多个以英文逗号隔开" style="width:25%; padding-right: 20px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
            <el-form-item v-show="isShow">
                <p style="font-size: 16px">共有：<strong style="color: #3a835d">{{queryTotal}} </strong>条学生信息</p>
            </el-form-item>
            <el-form-item v-show="isShow">
                <el-button type="primary" @click="onDownload">导出简历</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="queryList" id="download" style="display: none;">
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="sex" label="性别" ></el-table-column>
            <el-table-column prop="tel" label="电话" ></el-table-column>
            <el-table-column prop="mail" label="邮件" ></el-table-column>
            <el-table-column prop="school" label="院校" ></el-table-column>
            <el-table-column prop="major" label="专业" ></el-table-column>
            <el-table-column prop="study" label="研究方向" ></el-table-column>
            <el-table-column prop="education" label="学历" ></el-table-column>
            <el-table-column prop="graduate" label="毕业时间" ></el-table-column>
            <el-table-column prop="city" label="所在城市" ></el-table-column>
        </el-table>
		</div>
	</div>
</div>
</template>

<script>
    import XLSX from 'xlsx'
    import FileSaver from 'file-saver'
    import {findListByParam} from '../../api/student'
    import {saveOne} from '../../api/logs'

    export default {
        name: "export",
        data() {
            var validateContract = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('合同编号不能为空'));
                }
                var reg = /^CON[1-2]\d{3}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{6}$/;
                if (!reg.test(value)) {
                    return callback(new Error('合同编号格式不正确'));
                }
                //表单验证必须添加callback，否则this.$refs['form'].validate((valid) => {} 验证成功不执行成功方法
                callback();
            };
            return {
                form: {
                    contract:'',
                    school:'',
                    education: [],
                    sex:'',
                    major: '',
                    city: '',
                    graduate: '',
                    study: '',
                },
                rules:{
                    contract: [
                        { validator: validateContract, required: true, trigger: 'blur' }
                    ],
                    school: [
                        { required: true, message: '请输入院校名称', trigger: 'blur' }
                    ]
                },
                isLoading: false,
                queryTotal: 0,
                queryList: [],
                total:'',
                isShow: false,
                entity:{},
            }
        },
        methods: {
            onDownload(){
                this.isLoading = true;
                if(this.queryTotal === 0){
                    this.$message.error('无可导出人数，请重新查询');
                    this.isLoading = false;
                    return false;
                }
                //保存导出操作日志
                this.entity.contract = this.form.contract;
                this.entity.exportNum = this.total;

                this.saveLogs();
                //导出数据
                var wb = XLSX.utils.table_to_book(document.querySelector("#download"));
                console.log("wb===>",wb);
                var ws = wb.Sheets.Sheet1;
                ws['!cols']= [{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100}];
                var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),this.form.contract+ "信息.xlsx");
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                this.isLoading = false;
                return wbout;
            },
            resetForm(){
                this.$refs['form'].resetFields();
                this.isShow = false;
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        //console.log('success submit!!');
                        this.findList();
                    } else {
                        //console.log('error submit!!');
                        this.isLoading = false;
                        return false;
                    }
                });
            },
            async findList(){
                this.isLoading = true;
                this.form.school = this.form.school.replace(/，/ig,",");
                //console.log(this.form.school);
                let resp = await findListByParam(this.form);
                if(!this.qUtil.validResp(resp)){
                    this.$message.error('查询失败');
                    this.isLoading = false;
                }
                this.queryList = resp.data.dataList;
                this.queryTotal = resp.data.total;
                this.total = resp.data.total;
                if(this.total > 0){
                    this.isShow = true;
                }
                this.isLoading = false;
            },
            async saveLogs(){
                this.isLoading = true;
                let resp = await saveOne({entity:this.entity});
                if(!this.qUtil.validResp(resp)){
                    this.$message.error(resp.errMsg || '保存操作日志失败');
                    this.isLoading = false;
                }
                this.isLoading = false;
            }
        },
    }
</script>

<style>
.search-form-box .el-form-item .el-form-item__label{
	line-height: 37px;
}
</style>